<template>
  <div class="app-container">
    <el-row type="flex" justify="start">
      <el-col :span="3" style=" margin-left: 1%;">
        <el-input
          placeholder="请输入消息内容"
          v-model="keyword"
          @keyup.enter.native="doSearch()" clearable>
        </el-input>
      </el-col>
      <el-col :span="3" style=" margin-left: 1%;">
        <el-input
          placeholder="请输入用户名"
          v-model="username"
          @keyup.enter.native="doSearch()" clearable>
        </el-input>
      </el-col>
      <el-col :span="3" style=" margin-left: 1%;">
        <el-input
          placeholder="请输入频道群组名"
          v-model="channelGroup"
          @keyup.enter.native="doSearch()" clearable>
        </el-input>
      </el-col>
      <el-col :span="15" style=" margin-left: 1%;margin-right: 1%">
        <el-date-picker style="margin-right: 2%"
                        v-model="timeRange"
                        type="datetimerange"
                        :picker-options="pickerOptions2"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        align="right"
                        @keyup.enter.native="doSearch()">
        </el-date-picker>
        <el-button type="primary" icon="el-icon-search" @keyup.enter.native="doSearch()" @click="doSearch">搜索
        </el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="doClear">重置</el-button>
      </el-col>
    </el-row>

    <el-row class="my_row" v-loading="loading">
      <el-col v-for="card in this.cardData" :span="24" class="card-col" :key="card.id">
        <div class="box-card">
          <el-link :underline="false" @click="detailOne(card)">
            <div class="item title">
              <span v-html="card.titleText"/>
            </div>
            <!--            <div class="text item message">-->
            <!--              {{card.messageText}}-->
            <!--            </div>-->
          </el-link>
          <div class="text ">
            <span>频道/群组：<el-link :underline="false"  @click="searchByChannel(card)">{{card.chatTitle}}</el-link></span>
            <el-divider direction="vertical"/>
            <span>用户昵称： </span>

            <el-popconfirm
              confirmButtonText='标记为敏感'
              cancelButtonText='搜索用户消息'
              icon="el-icon-info"
              iconColor="yellow"
              cancelButtonType="success"
              title="请选择一个操作"
              @onConfirm="mark(card)"
              @onCancel="searchByUser(card)">
              <el-link slot="reference" :underline="false" >{{card.senderFirstName}}{{card.senderLastName}}</el-link>
            </el-popconfirm>

            <el-divider direction="vertical"/>
            <span style="float: right; padding: 3px 0">{{card.dateTime }}</span>
          </div>
          <el-divider/>
          <!--          暂时屏蔽用户ID： {{card.messageFrom }}-->
        </div>
      </el-col>
    </el-row>
    <el-row v-if="this.cardData.length>0" align="middle">
      <el-col :offset="10">
        <el-button type="primary" :loading="loading" @click="searchMore()">加 载 更 多</el-button>
      </el-col>
      <el-backtop/>
    </el-row>
    <el-row v-else align="middle">
      <el-col :offset="10">
        <el-button type="text" style="font-size: 18px" size="medium" disabled>暂 无 结 果</el-button>
      </el-col>
      <el-backtop/>
    </el-row>

    <el-dialog :visible.sync="alertDialogVisible" title="消息预览" center>
      <div v-html="alertText"></div>
    </el-dialog>
  </div>
</template>

<script>
  import {messageSearch} from '@/api/table'
  import {markUser} from '@/api/table'
  function filterInput(val) {
    // 这里过滤的是除了中英文和数字的其他字符
    return val.replace(/[^a-zA-Z0-9 \u4e00-\u9fa5]/, '')
  }

  export default {

    data() {
      return {
        from: 0,
        alertText: '',
        alertDialogVisible: false,
        hasMore: true,
        loading: false,
        keyword: '',
        username: '',
        timeRange: null,
        channelGroup: '',
        cardData: [],
        list: null,
        listQuery: {
          page: 1,
          limit: 20
        },
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    created() {
      //this.getList()
      this.doSearch()
    },
    watch: {
      keyword: function (val) {
        this.from = 0
        this.hasMore = true
        this.keyword = filterInput(val)
      },
      timeRange: function () {
        this.from = 0
        this.hasMore = true
      },
      username: function (val) {
        this.from = 0
        this.hasMore = true
        this.username = filterInput(val)
      },
      channelGroup: function (val) {
        this.from = 0
        this.hasMore = true
        this.channelGroup = filterInput(val)
      }
    },
    methods: {
      doSearch() {
        this.loading = true
        if (!this.hasMore && this.cardData.length>0) {
          this.$message({
            showClose: true,
            message: '没有更多了！',
            type: 'error',
            duration: 1000
          });
          this.loading = false
          return;
        }
        // if (this.cardData.length>0 && this.keyword === '' && this.timeRange == null && this.username ==  null && this.channelGroup == null) return
        //使用逗号分隔起始与结束时间
        let startTime = null
        let endTime = null
        if (this.timeRange != null) {
          //时区差,该值为负数 解决时区相差8小时问题
          //let tzoffset = (new Date()).getTimezoneOffset() * 60000;

          let s = Date.parse(this.timeRange[0]);
          // 返回当前时区的时间
          // startTime = (new Date(s - tzoffset)).toISOString().slice(0, -1);

          let e = Date.parse(this.timeRange[1]);
          //时区差,该值为负数
          //返回当前时区的时间
          //endTime = (new Date(e - tzoffset)).toISOString().slice(0, -1);
          startTime = new Date(s).toISOString()
          endTime = new Date(e).toISOString()
          //startTime = s.getFullYear() + '-' + (s.getMonth() + 1) + '-' + s.getDate() + ' ' + s.getHours() + ':' + s.getMinutes() + ':' + s.getSeconds();
          //endTime = e.getFullYear() + '-' + (e.getMonth() + 1) + '-' + e.getDate() + ' ' + e.getHours() + ':' + e.getMinutes() + ':' + e.getSeconds();
        }
        let data = {
          "keyword": this.keyword,
          "startTime": startTime,
          "endTime": endTime,
          "userName": this.username,
          "channelGroup": this.channelGroup,
          "from": this.from
        }
        this.search(data);
      },
      doClear() {
        this.keyword = ''
        this.timeRange = null
        this.username = ''
        this.channelGroup = ''
        this.cardData = []
        this.from = 0
        this.hasMore = true
        this.doSearch()
      },
      //加载更多
      searchMore() {
        this.from += 20
        this.doSearch()
      },
      detailOne(card) {
        let t = card.msgText
        t = t.replace(/\n/g, "<br>")
        this.alertText = t
        this.alertDialogVisible = true
        //alert(card.messageText)
      },
      mark(card){
        markUser(JSON.stringify(card)).then(response =>{
          if (response.code === 200) {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'success',
              duration: 1000
            });
          } else {
            this.$message({
              showClose: true,
              message: response.msg,
              type: 'error',
              duration: 1000
            });
          }
        });
      },
      searchByUser(card){
        let data = {
          "senderId": card.senderId
        }
        this.loading = true
        this.search(data)
      },
      searchByChannel(card){
        let data = {
          "chatId": card.chatId
        }
        this.loading = true
        this.search(data)
      },
      search(data){
        messageSearch(data).then(response => {
          if (response.code === 200) {
            if (response.data.length > 0) {
              if (this.from === 0) {
                //当从头来时 cardData也需要重置
                this.cardData = response.data
              } else {
                this.cardData = this.cardData.concat(response.data)
              }
              //返回的结果小于10条 认为没有更多
              if (response.data.length < 10) {
                this.hasMore = false
              }
            } else {
              this.hasMore = false
              this.cardData = []
              // this.$message({
              //   showClose: true,
              //   message: '未找到数据！',
              //   type: 'error',
              //   duration: 1000
              // });
            }
          }
          this.loading = false;
        });
      }
    }
  }
</script>

<style scoped>

  .text {
    font-size: 14px;
    color: #5a5e66;
  }

  .title {
    font-size: 14px;
    color: #000000;
    overflow: hidden;
    /*只显示一行 多余的会为省略号*/
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .item {
    margin-bottom: 10px;
  }

  .box-card {
    width: 95%;
    margin-left: 1%;
    padding: 0px 20px;
  }

  /*.card-col{*/
  /*  width:32%;*/
  /*}*/
  .my_row {
    margin-top: 20px;
  }

  /**
    超出两行用省略号表示
   */
  .message {
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  /* el-divider 修改高度&虚线效果 */
  .el-divider--horizontal {
    margin: 5px 0;
  }

</style>
